'use strict';
import React from 'react';
import { View, Text, Navigator,StyleSheet,Image,Alert,FlatList} from 'react-native';
import { ListView ,Flex,WingBlank } from 'antd-mobile';
function MyBody(props) {
    return (
        <View className="am-list-body my-body">
            <Text style={{ display: 'none' }}>you can custom body wrap element</Text>
            {props.children}
        </View>
    );
}
const data = [
    {
        img: {uri:"https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png"},
        title: 'Meet hotel',
        des: 'Meet1',
    },
    {
        img: {uri:'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png'},
        title: 'McDonald\'s invites you',
        des: '自定义',
    },
    {
        img: {uri:'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png'},
        title: 'Eat the week',
        des: '自定义2',
    },
];
let index = data.length - 1;
const NUM_SECTIONS = 5;
const NUM_ROWS_PER_SECTION = 5;
let pageIndex = 0;
export default class SearchResults extends React.Component {

    constructor(props) {
        super(props);
        const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
        const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];

        const dataSource = new ListView.DataSource({
            getRowData,
            getSectionHeaderData: getSectionData,
            rowHasChanged: (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });

        this.dataBlob = {};
        this.sectionIDs = [];
        this.rowIDs = [];
        this.genData = (pIndex = 0) => {
            for (let i = 0; i < NUM_SECTIONS; i++) {
                const ii = (pIndex * NUM_SECTIONS) + i;
                const sectionName = `Section ${ii}`;
                this.sectionIDs.push(sectionName);
                this.dataBlob[sectionName] = sectionName;
                this.rowIDs[ii] = [];

                for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
                    const rowName = `S${ii}, R${jj}`;
                    this.rowIDs[ii].push(rowName);
                    this.dataBlob[rowName] = rowName;
                }
            }
            // new object ref
            this.sectionIDs = [].concat(this.sectionIDs);
            this.rowIDs = [].concat(this.rowIDs);
        };

        this.state = {
            dataSource: dataSource.cloneWithRowsAndSections(this.dataBlob, this.sectionIDs, this.rowIDs),
            isLoading: true,
        };
    }

    componentDidMount() {
        // you can scroll to the specified position
        // setTimeout(() => this.refs.lv.refs.listview.scrollTo(0, 120), 800); // also work
        // setTimeout(() => this.refs.lv.scrollTo(0, 120), 800); // recommend usage

        // simulate initial Ajax
        setTimeout(() => {
            this.genData();
            this.setState({
                dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlob, this.sectionIDs, this.rowIDs),
                isLoading: false,
            });
        }, 600);
    }

    onEndReached (event){
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        console.log('reach end', event);
        this.setState({ isLoading: true });
        setTimeout(() => {
            this.genData(++pageIndex);
            this.setState({
                dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlob, this.sectionIDs, this.rowIDs),
                isLoading: false,
            });
        }, 1000);
    }
    render() {

        const separator = (sectionID, rowID) => (
            <View key={`${sectionID}-${rowID}`}
                 style={{
                     backgroundColor: '#F5F5F9',
                     height: 8,
                 }}
            />
        );
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = data.length - 1;
            }
            const obj = data[index--];
            return (
                <View key={rowID} style={{backgroundColor: "white"}}>
                    <WingBlank size="lg" >
                    <Text style={{fontSize: 20,fontWeight: 'bold',}}>{obj.title}</Text>
                    <Flex>
                        <Flex.Item>
                            <Image source={obj.img} style={{width: 100, height: 100}} />
                        </Flex.Item>
                        <Flex.Item>
                            <Text style={{  fontWeight: 'bold' }}>{obj.des}</Text>
                            <Text><Text style={{  fontSize: 40,color: '#FF6E27' }}>35</Text>¥</Text>
                        </Flex.Item>
                    </Flex>
                    </WingBlank>
                </View>
            );
        };
        return (
                <View style={{  width: '96%' }}>
                    <ListView ref="lv"
                              dataSource={this.state.dataSource}
                              renderHeader={() => <Text style={{color: "#888",fontSize: 30,fontWeight: 'bold',}}>header</Text>}
                              renderFooter={() => (<Text style={{ padding: 30, textAlign: 'center' }}>
                                  {this.state.isLoading ? 'Loading...' : 'Loaded'}
                              </Text>)}
                              renderSectionHeader={sectionData => (
                                  <Text style={{color: "#37882f",fontSize: 25,fontWeight: 'bold',}}>{`Task ${sectionData.split(' ')[1]}`}</Text>
                              )}
                              renderBodyComponent={() => <MyBody />}
                              renderRow={row}
                              renderSeparator={separator}
                              className="fortest"
                              pageSize={4}
                              onScroll={() => { console.log('scroll'); }}
                              scrollRenderAheadDistance={500}
                              scrollEventThrottle={200}
                              onEndReached={e=>this.onEndReached(e)}
                              onEndReachedThreshold={10}
                    />
                </View>
        );
    }

}
